<template>
	<view class="container">
		<view class="science-detail">
			<image :src="science.image" mode="aspectFill" class="science-image"></image>
			<view class="science-content">
				<text class="science-title">{{ science.title }}</text>
				<text class="science-author">医学前沿</text>
				<text class="science-time">今天</text>
				<text class="science-description">这里是科普详情内容，可以根据实际需求进行扩展。</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			science: {}
		}
	},
	onLoad(options) {
		// 模拟从服务器获取数据
		const scienceList = [
			{
				id: 1,
				title: '常见病预防',
				image: '/static/cs/yfjb.jpeg'
			},
			{
				id: 2,
				title: '健康知识',
				image: '/static/cs/jkzs.jpeg'
			},
			{
				id: 3,
				title: '健康知识2',
				image: '/static/cs/jkzs.jpeg'
			}
		];
		this.science = scienceList.find(item => item.id === parseInt(options.id)) || {};
	}
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
}
.science-detail {
	background-color: #fff;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 5rpx 20rpx rgba(52, 152, 219, 0.1);
}
.science-image {
	width: 100%;
	height: 300rpx;
}
.science-content {
	padding: 20rpx;
}
.science-title {
	font-size: 34rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}
.science-author, .science-time {
	font-size: 24rpx;
	color: #a5b1c2;
	margin-right: 20rpx;
}
.science-description {
	font-size: 28rpx;
	margin-top: 20rpx;
}
</style> 